<template>
  <div class="app-container flex-column">
    <div ref="headt" class="flex-between mt10 mb10">
      <div></div>
      <div>

      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="代码" name="tab1">
        <div :style="{'height':tableheight+'px'}" style="width: 100%;overflow: auto;">
          <AceEdit ref="aceJsRef" :height="tableheight" :value="value" :config="config" :theme="theme" @change="onChange"
            :readOnly="false"></AceEdit>
        </div>
      </el-tab-pane>

      <el-tab-pane label="浏览" name="tab2">
        <div class="table_debug" :style="{'height':tableheight+'px'}" style="width: 100%;overflow: auto;">
          <div v-html="content"></div>

        </div>

      </el-tab-pane>

    </el-tabs>



  </div>


</template>

<script>
  import AceEdit from '@/views/components/aceedit'

  export default {
    name: "Edittable",
    components: {
      AceEdit
    },
    data() {
      return {
        activeName: 'tab1',
        tableheight: 0,
        textarea1: '',
        ruleform: {
          xm: '倪大勇'
        },

        value: "",
        theme: 'chrome',
        content: "",
        chart: "",
        config: {
          fontSize: 14
        },
        optionsTheme: [{
            value: 'chrome',
            label: 'chrome'
          },
          {
            value: 'vibrant_ink',
            label: 'vibrant_ink'
          },
          {
            value: 'tomorrow_night_eighties',
            label: 'tomorrow_night_eighties'
          },
          {
            value: 'github',
            label: 'githubcobalt'
          },
          {
            value: 'tomorrow_night_blue',
            label: 'tomorrow_night_blue'
          }
        ],
        optionsFontSize: [{
          value: 12,
          label: '12px'
        }, {
          value: 14,
          label: '14px'
        }, {
          value: 16,
          label: '16px'
        }, {
          value: 18,
          label: '18px'
        }],

      };
    },
    created() {




    },
    mounted() {
      this.$nextTick(() => {
        this.settableheiht();
        window.onresize = () => {
          this.settableheiht();
        };
      });
    },
    methods: {

      onChange(value) {
        this.content = value;
      },

      onRun() {
        // 判断编辑器是否有误
        if (this.$refs["aceJsRef"].hasEditorError()) {
          this.$message.error('请检查代码是否正确');
          return;
        }

        // 初始化echart
        this.chart = this.$echarts.getInstanceByDom(document.getElementById("myEcharts"));
        if (this.chart == null) {

          this.chart = this.$echarts.init(document.getElementById("myEcharts"));
        }
        let option = {};
        let echarts = require("echarts")

        this.chart.clear();
        try {
          eval(this.content);

        } catch (err) {
          console.log("eval执行错误", err);
        }
        this.chart.setOption(option);
      },
      settableheiht() {
        let headt = this.$refs.headt.clientHeight;

        var clientHeight = document.body.clientHeight;
        clientHeight = clientHeight - headt;
        this.tableheight = clientHeight - 170;
        console.log(this.tableheight);
      }

    }
  };
</script>


<style lang="scss">
  .table_debug {
    table {

    }

    td {
      border: 1px solid black;
      border-width: 0 1px;
    }

    .grid_print {

      background-color: #ffffff;
      margin: 0px auto;
      margin-top: 10px;
    }

    tbody tr td {

      height: 38px;
      line-height: 38px;
      word-break: break-all;
      word-wrap: break-word;
      padding-left: 10px;
      padding-right: 10px;
    }

    .headfont {
      border: 0px #e6e6e6 solid !important;
      text-align: center;
      font-size: 22px;
      line-height: 60px;
      height: 60px;
      font-weight: bold;
      letter-spacing: 5px;
    }

    .line_t {

      border-top: 1px black solid !important;
    }

    .line_l {
      border-left: 1px black solid !important;

    }

    .line_r {
      border-right: 1px black solid !important;

    }

    .line_b {
      border-bottom: 1px black solid !important;

    }
  }
</style>
